<template>
  <div class="budgetBox">
    <table class="input" border="1px solid rgba(212, 232, 228, 0.73)" cellspacing="0">
      <thead>
        <tr class="title">
          <th>经费投入预算</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr class="label">
          <td>科目</td>
          <td>金额（万元）</td>
        </tr>
        <tr v-for="(item, index) in data.table1" :key="index">
          <td>
            <span v-html="`&emsp;`.repeat(Number(item.subject))"></span>{{item.subjectName}}
          </td>
          <td>
            <input
              :disabled="title.includes('详情')"
              type="text"
              @input="item.amount = NumberCheck(item.amount)"
              :maxlength="10"
              v-model="item.amount"
            />
          </td>
        </tr>
        <tr>
          <td>合计</td>
          <td>
            <input disabled type="text" min="0" placeholder="自动计算" :value="data.totalNum1" />
          </td>
        </tr>
        <tr v-for="(item, index) in data.table2.length - data.table1.length" :key="index">
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>

    <table class="output" border="1px solid rgba(212, 232, 228, 0.73)" cellspacing="0">
      <thead>
        <tr class="title">
          <th>经费支出预算</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr class="label">
          <td>科目</td>
          <td>金额（万元）</td>
        </tr>
        <tr v-for="(item, index) in data.table2" :key="index">
          <td>
            <span v-html="`&emsp;`.repeat(processArray(item.subjectName)) "></span>{{ item.subjectName }}
          </td>
          <td>
            <input
              :disabled="title.includes('详情')"
              type="text"
              @input="item.amount = NumberCheck(item.amount)"
              v-model="item.amount"
              :maxlength="10"
            />
          </td>
        </tr>
        <tr>
          <td>合计</td>
          <td>
            <input disabled type="text" min="0" placeholder="自动计算" :value="data.totalNum2" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, watch, onBeforeUnmount } from 'vue'
import { useStore } from 'vuex'
import { NumberCheck, processArray } from '@/utils/utils'

export default defineComponent({
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  setup() {
    const store = useStore()
    let projectForm = reactive(store.state.projectCenter.form)

    const input = ref()
    const data = reactive({
      table1: [{ subjectName: '', amount: '', subject: '' }],
      table2: [{ subjectName: '', amount: '', subject: '' }],
      totalNum1: 0,
      totalNum2: 0,
    })
    let subjectNameList=['国家拨款','公司拨款','承担单位拨款','协作单位拨款','自筹','其他',
    '（一）直接费用','1、研究人员费','2、设备费','(1)购置设备费','(2)试制设备费','(3)设备改造与租赁费',
    '3、材料费','4、测试化验加工费','5、燃料动力费','6、差旅/会议/国际合作与交流费',
    '7、出版/文献/信息传播/知识产权事务费','8、劳务费','9、专家咨询费','10、其他支出','（二）间接费用',]
    let subjectList=['gjbk','gsbk','cddwbk','xzdwbk','zc','qt',
    'zjfy','yjryf','sbf','gzsbf','szsbf','sbgzyzlf',
    'clf','cshyjgf','rldlf','clhygjhzyjlf',
    'cbwxxxcbzscqswf','lwf','zjzxf','qtzc','jjfy',]
    const filterTable = () => {
      projectForm.projectInvestmentsList = projectForm.projectInvestmentsList.filter((item) => {
        return subjectList.includes(item.subject) && item.sfsybb == 0
      }).sort((a,b)=>{
        console.log(subjectList.indexOf(a.subject),'sort');
        return subjectList.indexOf(a.subject)-subjectList.indexOf(b.subject)
      })
      console.log(projectForm.projectInvestmentsList, 'projectForm.projectInvestmentsList')
    }
    //分开table数据
    const hadTable = () => {
      data.table1 = []
      data.table2 = []
      projectForm.projectInvestmentsList?.forEach((e: any) => {
        // console.log(e,'经费列表');
        if (e.costCategory == 'input') {
          data.totalNum1 += Number(e.amount)
          data.table1.push(e)
        } else {
          data.table2.push(e)
          data.totalNum2 += Number(e.amount)
        }
      })
      data.totalNum1.toFixed(2)
      data.totalNum2.toFixed(2)
    }
    onMounted(() => {
      filterTable()
      hadTable()
    })
    watch(
      () => data.table1,
      () => {
        data.totalNum1 = 0
        data.table1?.forEach((e: any) => {
          data.totalNum1 += Number(e.amount)
        })
        data.totalNum1 = data.totalNum1.toFixed(2) as any
      },
      { deep: true }
    )
    watch(
      () => data.table2,
      () => {
        data.totalNum2 = 0
        data.table2?.forEach((e: any) => {
          data.totalNum2 += Number(e.amount)
        })
        data.totalNum2 = data.totalNum2.toFixed(2) as any
      },
      { deep: true }
    )
    onBeforeUnmount(() => {
      console.log('预算经费表格卸载了')
    })
    return {
      input,
      data,
      hadTable,
      NumberCheck,
      processArray
    }
  },
})
</script>

<style scoped lang="scss">
th {
  height: 25px;
}
.title {
  text-align: center;
  line-height: 36px;
  background-color: #f0f2f5;
  th {
    width: 200px;
  }
  th:nth-child(3) {
    width: 250px;
  }
}
.label {
  text-align: center;
  line-height: 28px;
}

input {
  outline: none;
  width: 90%;
  margin: 0 5%;
}
.budgetBox {
  // margin: 0 10%;
  width: 100%;
  background-color: #492222;
  table {
    float: left;
    line-height: 30px;
    td {
      height: 34px;
    }
  }
  justify-content: center;
  .output {
    th:first-child {
      width: 500px;
    }
  }
}
</style>
